<template>
  <div class="main_div">
    <h1>商品分类管理</h1>

    <div style="width: 100%; text-align: left; margin-bottom: 20px;">
      <el-button type="success" @click="insert_fenlei_dialog">新增分类</el-button>
      <el-button type="warning" @click="set_guige_diglog">设置规则</el-button>
      <el-button type="danger" @click="clear_fenlei_select">清除选中</el-button>
    </div>

    <!-- 树状结构 -->
    <el-tree
    ref="tree"
    :data="treeData"
    :props="defaultProps"
    node-key="id"
    default-expand-all="true"></el-tree>

    <!-- 新增分类的弹窗 -->
    <el-dialog
      title="新增分类"
      :visible.sync="dialogVisible"
      width="30%">
      <div style="text-align: left;">
        <div style="margin-bottom: 10px;">父级分类：{{nodes.pname}}</div>
        <div>分类名称：<el-input v-model="nodes.name" style="width: 80%;" placeholder="请输入内容"></el-input></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertFenlei">新 增</el-button>
      </span>
    </el-dialog>

    <!-- 设置规格的弹窗 -->
    <el-dialog
      title="设置分类规格"
      :visible.sync="dialogVisible2"
      width="50%">

      <!-- 规格列表 -->
      <el-transfer
          style="text-align: left;"
          filterable
          :filter-method="select.filterMethod"
          filter-placeholder="请输入规格名称"
          v-model="select.value"
          :titles="['规格列表', '选中的规格']"
          :data="select.data">
        </el-transfer>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="setFenleiGuige">设  置</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
      data() {
        // const generateData = _ => {
        //   const data = [];
        //   const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
        //   const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
        //   cities.forEach((city, index) => {
        //     data.push({
        //       label: city,
        //       key: index,
        //       pinyin: pinyin[index]
        //     });
        //   });
        //   return data;
        // };

        return {
          //设置分类规格相关的属性
          select: {
            data: [],
            value: [],
            filterMethod(query, item) {
              return item.label.indexOf(query) > -1;
            }
          },
          treeData: [],
          defaultProps: {
            children: 'children',
            label: 'fenleiName'
          },
          //弹窗展示的属性
          dialogVisible: false,
          dialogVisible2: false,
          nodes:{
            pid: "", //父节点的id
            pname: "", //父节点的名称
            name: "" //当前节点的名称
          },
          //设置规格的相关属性
          guige: {
            fenleiId: ""
          }
        };
      },
      methods: {
        //查询分类树状结构
        queryFenleiTree(){
          this.$.ajax({
            url: "/fenlei/list",
            success: (data) => {
              this.treeData = data.data;
            }
          });
        },
        //打开新增分类的弹出框
        insert_fenlei_dialog(){
          //获取当前树状结构的选中的节点
          var key = this.$refs.tree.getCurrentKey();
          var cnode = this.$refs.tree.getCurrentNode();

          //选中的父节点
          this.nodes.pid = key;
          this.nodes.pname = cnode ? cnode.fenleiName : "无父级分类";

          this.dialogVisible = true;
        },
        //清除被选中的树状节点
        clear_fenlei_select(){
          this.$refs.tree.setCurrentKey(null);

          this.nodes.pid = "";
          this.nodes.pname = "无父级分类";
          this.nodes.name = "";
        },
        //添加商品分类
        insertFenlei(){
          //关闭弹窗
          this.dialogVisible = false;

          //ajax发送请求
          this.$.ajax({
            url: "/fenlei/insert",
            data: {
              pid: this.nodes.pid,
              fenleiName: this.nodes.name
            },
            success: (data) => {
              //重新查询树状结构
              this.queryFenleiTree();
            }
          });
        },
        //打开设置规格的弹出框
        set_guige_diglog(){
          //获得当前选中的节点
          var cnode = this.$refs.tree.getCurrentNode();
          if(cnode == null){
            this.$message({
              message: '必须选中一个商品分类',
              type: 'warning'
            });
            return;
          }

          //设置当前的分类id
          this.guige.fenleiId = cnode.id;
          this.dialogVisible2 = true;

          //发送请求，请求当前的规格列表（查询所有）
          this.$.ajax({
            url: "/guige/select/list",
            success: (data) => {
              this.select.data = data.data;
            }
          });

          //发送请求，请求当前分类已经拥有的规格列表
          this.$.ajax({
            url: "/guige/has/list",
            data: {
              fenleiId: this.guige.fenleiId
            },
            success: (data) => {
              this.select.value = data.data;
            }
          });
        },
        //提交分类的规格设置
        setFenleiGuige(){
          //分类id this.guige.fenleiId
          //被选中的规格id列表 this.select.value
          var guigeIdStr = "";
          for(var i = 0; i < this.select.value.length; i++){
            if(i != 0){
              guigeIdStr += "-";
            }
            guigeIdStr += this.select.value[i];
          }


          this.$.ajax({
            type: "POST",
            url: "/fenlei/setguige",
            data: {
              fenleiId: this.guige.fenleiId,
              guigeIdStr: guigeIdStr
            },
            success: (data) => {
              //关闭弹窗
              this.dialogVisible2 = false;
              //提示一个消息
              this.$message({
                message: '设置分类的规格成功！',
                type: 'success'
              });
            }
          });
        }
      },
      mounted(){
        //进入页面后触发
        this.queryFenleiTree();
      }
    };
</script>

<style scoped="scoped">

.main_div h1 {
  margin-bottom: 20px;
}

.main_div {
  background-color: white;
  height: 100%;
  padding: 40px;
}

</style>
